<template>
  <!--  右侧内容-->
  <div class="chj_order chj_ccall">
  	<h3 class="cal_mall_tit"><img src="~/assets/img/cal_phone.png">来电中心</h3>
  	<div class="ddzx2">
  		<div class="top">
  			<ul class="af">
  				<li class="li1" :class="select==0?'select':''" @mouseover="qhs(0)">业务来电信息</li>
  				<li class="li2" :class="select==2?'select':''" @mouseover="qhs(2)"> 资质来电信息</li>
  				<li class="li3" :class="select==1?'select':''" @mouseover="qhs(1)">我兑换的信息</li>
  			</ul>
  		</div>
  		<div class="ct">
  			<div class="ctno"><img src="~/assets/img/ddzx-no.png" width="254px" height="179px">
  				<p>还没有任何订单呢 <br><a href="javascript:;">去挑选好物&gt;&gt;</a></p>
  			</div>
  			<div class="ct2">
  				<table>
  					<thead>
  						<tr class="tr1">
  							<th style="width:">序号</th>
  							<th style="width:">{{select==2?'资质类型':'业务名称'}}</th>
  							<th style="width:">{{select==2?'资质专业':'客户姓名'}}</th>
  							<th style="width:">{{select==2?'资质等级':'联系方式'}}</th>
  							<th style="width:468px">{{select==2?'电话':'详情描述'}}</th>
  							<th style="width:">提交时间</th>
                <th :style="select==0?'':'display:none'">业务员</th>
                <th class="th7" :style="select==1?'display:none':''">{{select==2?'状态':'操作'}}</th>
                <th class="th7" :style="select==1?'':'display:none'">{{select==2?'状态':'操作'}}</th>
  						</tr>
  					</thead>
  					<tbody>
              <tr v-for="(data,id) in dingdan.slice(sl3*10,(sl3+1)*10)" :key="id">
                <td :style="data.readstatus==1?'':'color: #7C8396;'">{{id+1}}</td>
                <td :style="data.readstatus==1?'':'color: #7C8396;'">{{data.servicename}}</td>
                <td :style="data.readstatus==1?'':'color: #7C8396;'">{{data.username}}</td>
                <td :style="data.readstatus==1?'':'color: #7C8396;'">{{data.telphone}}</td>
                <td :style="data.readstatus==1?'':'color: #7C8396;'"><p style="text-align: center;">{{data.content?data.content:'无详情描述'}}</p></td>
                <td :style="data.readstatus==1?'':'color: #7C8396;'">{{data.createtime}}</td>
                <td :style="select==0?data.readstatus==1?'':'color: #7C8396;':'display:none'">{{data.serviceusername}}</td>
                <td class="td8" :style="select==1?'display:none':''"><a href="javascript:;" @click="data.readstatus==1?lingqu(data.id):''" :style="data.readstatus==1?'':'cursor:default;background: rgba(215, 219, 227, .6);color: #7C8396;border: 1px solid transparent;'">{{data.readstatus==1?'领取':'已兑换'}}</a></td>
                <td class="td8" :style="select==1?'':'display:none'"><a href="javascript:;" @click="tuihuan(data.id)">退还</a></td>
              </tr>
  					</tbody>
  				</table>
          <div class="dba" :style="dingdan==[]||dingdan==null||dingdan==''?'display:none':''" style="text-align: center; padding-bottom: 20px;margin-top: 30px">
            <a href="javascript:;" class="syy" @click="syy">上一页</a>
            <a href="javascript:;" v-for="(i,id) in sl2" @click="qh2(id)" :class="id==sl3?'select':''">{{i}}</a>
            <a href="javascript:;" class="xyy" @click="xyy">下一页</a>
          </div>
          <div class="no-ct" :style="dingdan==[]||dingdan==null||dingdan==''?'':'display:none'">
            <div></div>
          </div>
  			</div>
  		</div>
  	</div>
    <div class="tc" style="display: none;">
      <span>×</span>
      {{tcmsg}}
    </div>
  </div>
  <!-- 右侧内容 -->
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    props: ['foobar'],
    data () {
      return {
        title:null,
        select:0,
        sl3:0,
        tcmsg:'',
        sl2:[1],
        dingdan:[],
      }
    },
    async asyncData ({req,params}){
    let a = req.headers.cookie;
    let cookie = '';
    if(a.indexOf('userinfoRes')!=-1){
      let b = a.split('userinfoRes=');
      let c = b[1].split(';');
      cookie = c[0];
    }
    let gr = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/userCenterIndexData?userid=`+cookie);
    let all = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/allFormSubmitData?userid=`+cookie);
    let me = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/myFormSubmitData?userid=`+cookie);
    let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
    let data  = {nav:nh.data,id:cookie,gr:gr.data,all:all.data,me:me.data};
    return { title: data}
  },
  mounted:function(){
    this.qhs(0)
    $('.tbnava1').addClass('select');
    if(this.$route.query.name == 'all'){
      this.dingdan = this.title.all;
      this.select=0;
      this.sl2 = [1];
      let nb = Math.ceil(this.title.all?this.title.all.length/10:1);
      for (let i=1;i<= nb;i++){
        if(i>1){
          this.sl2.push(i);
        }
      }
      $('.hh-grzx .left  li').removeClass('select');
      $('.hh-grzx .left .div6 .li1').addClass('select');
    }else if(this.$route.query.name == 'me'){
      this.dingdan = this.title.me;
      this.select=1;
      this.sl2 = [1];
      let nb = Math.ceil(this.title.me?this.title.me.length/10:1);
      for (let i=1;i<= nb;i++){
        if(i>1){
          this.sl2.push(i);
        }
      }
      $('.hh-grzx .left  li').removeClass('select');
      $('.hh-grzx .left .div6 .li2').addClass('select');
    }else if(this.$route.query.name == 'qualification'){
      this.dingdan = [];
      this.select=2;
      this.sl2 = [1];
      let nb = 0;
      for (let i=1;i<= nb;i++){
        if(i>1){
          this.sl2.push(i);
        }
      }
      $('.hh-grzx .left  li').removeClass('select');
      $('.hh-grzx .left .div6 .li3').addClass('select');
    }
    function setCookie(cname,cvalue,exdays)
    {
      var d = new Date();
      d.setTime(d.getTime()+(exdays*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    if(this.title.gr == 'go_signin'){
      this.$router.push('/Login');
      setCookie('userinfoRes','',-1);
    }else if(this.title.gr == 'userid_error'){
      this.$router.push('/Login');
      setCookie('userinfoRes','',-1);
    }else if(this.title.gr == 'userinfo_is_null'){
      this.$router.push('/Login');
      setCookie('userinfoRes','',-1);
    }else if(this.title.gr == 'userinfo_banuse'){
      this.$router.push('/Login');
      setCookie('userinfoRes','',-1);
    }
    else if(this.title.gr == 'serviceid_is_null'){
      window.open('/Mall',_self);
    } else if(this.title.gr == 'serviceid_error'){
      window.open('/Mall',_self);
    }else if(this.title.gr == 'serviceinfo_is_null'){
      window.open('/Mall',_self);
    }else if(this.title.gr == 'serviceinfo_banuse'){
      window.open('/Mall',_self);
    }

    $(document).ready(function(){
      $('.ddzx2 .ct tbody tr:last').css('border-bottom','1px solid #f1f1f1')
      $('.hh-zssc .sct li').hover(function(){
        $(this).siblings().removeClass('select');
        $(this).addClass('select');
      });
      $('.ddzx2 .ct tbody tr').hover(function(){
        $(this).prev().css('border-bottom','0px solid #f1f1f1')
      },function(){
        $(this).prev().css('border-bottom','1px solid #f1f1f1')
      });


    })
  },
  watch:{
    "$route": function(){
      //路由变化会触发
      if(this.$route.query.name == 'all'){
        this.dingdan = this.title.all;
        this.select = 0;
        this.sl2 = [1];
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li1').addClass('select');
        let nb = Math.ceil(this.title.all?this.title.all.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(this.$route.query.name == 'me'){
        this.dingdan = this.title.me;
        this.select = 1;
        this.sl2 = [1];
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li2').addClass('select');
        let nb = Math.ceil(this.title.me?this.title.me.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }
      else if(this.$route.query.name == 'qualification'){
        this.dingdan = [];
        this.select = 2;
        this.sl2 = [1];
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li3').addClass('select');
        let nb =0;
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }
    }
  },
  methods:{
    tc:function(e1,e2,e3){
      var d = new Date();
      d.setTime(d.getTime()+(e3*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = e1 + "=" + e2 + "; " + expires;
      this.$router.push('/');
    },
    lingqu:function(e){
      var _this = this;
      if(confirm('确定兑换吗')){
        _this.$axios.post('api/PInterface/UserCenter/receiveFormSubmitInfo','userid='+_this.title.id+'&fsid='+e
        )
          .then(function(response){
            if(response.data == 'fsid_is_null'){
              _this.tcmsg =='ID不存在';
              $('.hh-login .tc').addClass('select');
              setTimeout(function(){//your codes
                window.location.reload()
              },800);
            }else if(response.data == 'fsid_error'){
              _this.tcmsg =='ID错误';
              $('.hh-login .tc').addClass('select');
              setTimeout(function(){//your codes
                window.location.reload()
              },800);

            }else if(response.data == 'formsubmitInfo_is_null'){
              _this.tcmsg =='数据未找到';
              $('.hh-login .tc').addClass('select');
              setTimeout(function(){//your codes
                window.location.reload()
              },800);
            }else if(response.data == 'formsubmitInfo_banuse'){
              _this.tcmsg =='数据已被禁用';
              $('.hh-login .tc').addClass('select');
              setTimeout(function(){//your codes
                window.location.reload()
              },800);
            }else{
              _this.tcmsg =response.data;
              $('.hh-login .tc').addClass('select');
              _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/allFormSubmitData?userid='+_this.title.id)
                .then(function(response){
                  _this.title.all = response.data;
                  if(_this.$route.query.name == 'all'){
                    _this.dingdan = _this.title.all

                  }else if(_this.$route.query.name == 'me'){
                    _this.dingdan = _this.title.me;
                  }
                });
              _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/myFormSubmitData?userid='+_this.title.id)
                .then(function(response){
                  _this.title.me = response.data;
                  if(_this.$route.query.name == 'all'){
                    _this.dingdan = _this.title.all
                  }else if(_this.$route.query.name == 'me'){
                    _this.dingdan = _this.title.me;
                  }

                });
              $('.tc').fadeIn(0);
              $('.tc').fadeOut(2000);
              setTimeout(function(){//your codes
                window.location.reload()
              },500);
            }


          });
      }


    },
    tuihuan:function(e){
      var _this = this;
      _this.$axios.post('api/PInterface/UserCenter/returnFormSubmitInfo','userid='+_this.title.id+'&fsid='+e
      )
        .then(function(response) {

          _this.tcmsg = response.data;
          $('.hh-login .tc').addClass('select');
          $('.tc').fadeIn(0);
          $('.tc').fadeOut(2000);
          setTimeout(function(){//your codes
            window.location.reload()
          },500);
        });


    },
    qhs:function(e){
      this.select = e;
      if(e ==0){
        this.dingdan = this.title.all;
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li1').addClass('select');
        this.sl2 = [1];
        let nb = Math.ceil(this.title.all?this.title.all.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(e == 1){
        this.dingdan = this.title.me;
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li2').addClass('select');
        this.sl2 = [1];
        let nb = Math.ceil(this.title.me?this.title.me.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }
      else if(e == 2){
        this.dingdan = [];
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li3').addClass('select');
        this.sl2 = [1];
        let nb = 0;
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }
    },
    syy:function(){
      if(this.sl3>0){
        this.sl3 = this.sl3-1;
      }
    },
    xyy:function(){
      var nb =  Math.ceil(this.dingdan?this.dingdan.length/10:0);
      if(this.sl3<nb-1){
        this.sl3= this.sl3+1;
      }
    },
    qh2:function(e){
      this.sl3= e;

    }
  }
  }
</script>

<style scoped="scoped">
  .ddzx2 .ct .dba {
  	  text-align: center;
  	}
  	.ct .dba {
  	  margin: 35px auto;
  	  text-align: center;
  	}
  	.dba span {
  	  line-height: 22px;
  	  display: inline-block;
  	  border: 1px solid #eeeeee;
  	  padding: 0 15px;
  	  margin-right: 4px;
  	  font-size: 14px;
  	  color: #999999;
  	}

  	.dba a {
  	  line-height: 22px;
  	  display: inline-block;
  	  border: 1px solid #eeeeee;
  	  padding: 0 12px;
  	  margin: 0 4px;
  	  font-size: 14px;
  	  color: #999999;
  	}

  	.dba a.select {
      display: inline-block;
  	  color: white;
  	  border-color: #1972ea;
  	  background: #1972ea;
  	}
.chj_order .ddzx2 .top li.li2.select:after{
  width: 80px;
  left: 50%;
  margin-left: -40px;
}
.7C8396{
  color: #7C8396;
}
</style>
